import React, { Component } from 'react';
import * as API from '../../api/api'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import { time} from '../../utils'
import './index.less'

export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            x:9999,
            y:9999,
            user:{}
        }
    }
    // static propTypes = {
    //     user: PropTypes.object.isRequired,
    // }

    show=(e,item)=>{
        API.batchGetUsersInfo({userIds:item._id}).then(res => {
            if (res.data.code === 1) {
                let data = res.data.data;
                this.setState({
                    user:data[item._id],
                    visible:true,
                    x:100,
                    y:200
                    // loadingAuthor:false
                })
            } 
        })
        console.log(e.nativeEvent)
        // this.setState({
        //     visible:false,
        // },()=>{
            // this.popupNode.setAttribute('class', `user-card user-card-placement-bottom`)
            // setTimeout(()=>{
                // console.log(e.nativeEvent)
                // this.setState({
                //     user:item,
                //     visible:true,
                //     x:e.nativeEvent.clientX,
                //     y:e.nativeEvent.clientY
                // })
            // },200)
        // })
        e.nativeEvent.stopImmediatePropagation ? e.nativeEvent.stopImmediatePropagation() : e.nativeEvent.cancelBubble = true;
    }
    hide=()=>{
        this.setState({
            visible:false
        })
    }
    retContainer () {
        let {x,y,visible} = this.state;
        if (!this.popupNode) {
            const popupNode = document.createElement('div')
            popupNode.setAttribute('class', 'user-card user-card-placement-bottom')
           
            this.popupNode = popupNode
            document.body.appendChild(popupNode)
        }
        this.popupNode.setAttribute('style', `top:${y}px;left:${x}px`)
        if(visible){
            this.popupNode.setAttribute('class', `user-card user-card-placement-bottom show`)
        }else{
            this.popupNode.setAttribute('class', `user-card user-card-placement-bottom`)
        }
        return this.popupNode
    }
       
    retContent () {
        let {user,visible} = this.state;
        return (
            visible?(<div className="user-card-content">
                <div className="user-card-arrow"></div>
                <div className="user-card-inner">
                    <div className="user-card-inner-content clearfix">
                        <div className="user-baseinfo">
                            <div className="user-avatar">
                                <img src={user.avatar} alt="" />
                            </div>
                            <div className="names">
                                <div className="username">{user.username}</div>
                                <p className="join-time">加入于{time(user.create_time)}</p>
                            </div>
                        </div>
                        <div className="user-card-section">
                            <div className="number_box">
                                <a className="number_item" href="">
                                    <div className="number_item_name">文章</div>
                                    <strong className="number_item_value">{user.article_count}</strong>
                                </a>
                                <a className="number_item" href="">
                                    <div className="number_item_name">关注者</div>
                                    <strong className="number_item_value">{user.follower_count}</strong>
                                </a>
                                <a className="number_item" href="">
                                    <div className="number_item_name">评论了</div>
                                    <strong className="number_item_value">{user.comment_count}</strong>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>):null
           
        )
    }
    _render(){//将弹层渲染到body下的div标签
        ReactDOM.render(this.retContent(), this.retContainer());
    }
    componentDidUpdate () {
        //当父级模块更新时，直接粗暴地执行渲染，该api跨节点渲染，理同ReactDOM.render
        // ReactDOM.unstable_renderSubtreeIntoContainer(
        //     this,
        //     this.retContent(),
        //     this.retContainer(),
        // )
        this._render()
    }
    componentDidMount(){
        this._render()
        window.document.addEventListener('click',(e)=>{
            this.hide()
        })
    }    
    render() {
        return null;
        // let {user} = this.props;
        // let {visible} = this.state;
        // return (
        //     visible?(
        //         <div className="user-card clearfix">
        //             <div className="user-card-arrow"></div>
        //             <div className="user-card-inner">
        //                 <div className="user-card-inner-content">
        //                     <div className="user-avatar">
        //                         <img src={user.avatar} alt="" />
        //                     </div>
        //                     <div className="names">
        //                         <div className="username">{user.username}</div>
        //                         <p className="join-time">加入于{time(user.create_time)}</p>
        //                     </div>
        //                     <ul className="user-controls">
        //                         <li></li>
        //                     </ul>
        //                 </div>
        //             </div>
        //         </div>
        //     ):null
        // )    
    }
}